import React, { Component } from 'react'
//导入antd组件
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile'
//导入axios优化组件
import { API } from '../../utils/api'
//导入导航菜单的图片
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'
//导入样式
import './index.scss'
//导入Utils获取当前城市的函数
import { getCurrentCity } from '../../utils/index'
//导入SearchHeader组件
import SearchHeader from '../../components/SearchHeader/inedx'
//导入环境变量的值
import { BASE_URL } from '../../utils/url'

const navs = [
  {
    id: 1,
    img: Nav1,
    title: '整租',
    path: '/home/list',
  },
  {
    id: 2,
    img: Nav2,
    title: '合租',
    path: '/home/list',
  },
  {
    id: 3,
    img: Nav3,
    title: '地图找房',
    path: '/map',
  },
  {
    id: 4,
    img: Nav4,
    title: '去出租',
    path: '/rent/add',
  },
]

export default class Index extends Component {
  state = {
    //轮播图数据
    swipers: [],
    //轮播图开关
    isSwipersLoaded: false,
    //租房小组数据
    groups: [],
    //最新资讯
    news: [],
    //当前定位城市名
    curentCityName: '',
  }

  //获取轮播图数据
  getSwipers = async () => {
    const res = await API.get('/home/swiper')
    this.setState({
      swipers: res.data.body,
      isSwipersLoaded: true,
    })
  }

  //获取租房小组数据
  getGroups = async () => {
    const res = await API.get('/home/groups', {
      params: {
        area: 'AREA%7C88cff55c-aaa4-e2e0',
      },
    })
    this.setState({
      groups: res.data.body,
    })
  }

  //获取最新资讯数据
  getNews = async () => {
    const res = await API.get('/home/news', {
      params: {
        area: 'AREA%7C88cff55c-aaa4-e2e0',
      },
    })
    this.setState({
      news: res.data.body,
    })
  }

  //渲染轮播图
  renderSwipers = () => {
    const { swipers } = this.state
    return swipers.map((item) => (
      <a
        key={item.id}
        href="http://www.alipay.com"
        style={{
          display: 'inline-block',
          width: '100%',
          height: 212,
        }}
      >
        <img
          src={BASE_URL + item.imgSrc}
          alt=""
          style={{ width: '100%', verticalAlign: 'top' }}
        />
      </a>
    ))
  }

  //渲染导航菜单
  renderNavs = () => {
    return navs.map((item) => (
      <Flex.Item
        key={item.id}
        onClick={() => this.props.history.push(item.path)}
      >
        <img src={item.img} alt="" />
        <h2>{item.title}</h2>
      </Flex.Item>
    ))
  }

  //渲染最新资讯
  renderNews = () => {
    return this.state.news.map((item) => (
      <div className="news-item">
        {/* 左侧图片 */}
        <div className="imgwrap">
          <img
            className="img"
            src={`http://localhost:8080${item.imgSrc}`}
            alt=""
          />
        </div>
        {/* 右侧简介 */}
        <Flex className="content" direction="column" justify="between">
          {/* 右侧简介-标题 */}
          <h3 className="title">{item.title}</h3>
          {/* 右侧简介-信息 */}
          <Flex className="info" justify="between">
            <span>{item.from}</span>
            <span>{item.date}</span>
          </Flex>
        </Flex>
      </div>
    ))
  }

  async componentDidMount() {
    this.getSwipers()
    this.getGroups()
    this.getNews()
    const currentCity = await getCurrentCity()
    this.setState({
      curentCityName: currentCity.label,
    })
  }

  render() {
    return (
      <div className="index">
        {/* 轮播图 */}
        {this.state.isSwipersLoaded ? (
          <div className="swiper">
            <Carousel autoplay infinite>
              {this.renderSwipers()}
            </Carousel>

            {/* 搜索栏 */}
            <SearchHeader
              curentCityName={this.state.curentCityName}
            ></SearchHeader>
          </div>
        ) : (
          <div></div>
        )}

        {/* 导航菜单 */}
        <Flex className="nav">{this.renderNavs()}</Flex>

        {/* 租房小组 */}
        <div className="group">
          <h3 className="group-title">
            租房小组
            <span className="more">更多</span>
          </h3>
          <Grid
            data={this.state.groups}
            columnNum={2}
            square={false}
            hasLine={false}
            renderItem={(item) => (
              <Flex className="group-item" justify="around" id={item.id}>
                <div className="desc">
                  <p className="title">{item.title}</p>
                  <div className="info">{item.desc}</div>
                </div>
                <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
              </Flex>
            )}
          />
        </div>

        {/* 最新资讯 */}
        <div className="news">
          <div className="group-title">最新资讯</div>
          <WingBlank size="md">{this.renderNews()}</WingBlank>
        </div>
      </div>
    )
  }
}
